﻿<h1>Pager Control Example</h1>
This example explains how to create a window with 5 Pager controls, bind them the data and handle paging. Note how pager4 uses proprietary properties "currentPage" and "pagesCount" for paging.<br>
<button id="PagerControlExample" class="try-example-button">Try Example</button>
<h2>UI Model</h2>
<div style="color:Black;background-color:White;"><pre>{
    <span style="color:#A31515;">"windows"</span>: [
        {
            <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"PagersExample"</span>,
            <span style="color:#A31515;">"title"</span>: <span style="color:#A31515;">"Pagers"</span>,
            <span style="color:#A31515;">"left"</span>: 500,
            <span style="color:#A31515;">"top"</span>: 100,
            <span style="color:#A31515;">"width"</span>: 550,
            <span style="color:#A31515;">"height"</span>: 300,
            <span style="color:#A31515;">"controls"</span>: [
                <b>{
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"unboundPager"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"pager"</span>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"pager1"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"pager"</span>,
                    <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"pagerInfo1"</span>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"pager2"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"pager"</span>,
                    <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"pagerInfo2"</span>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"pager3"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"pager"</span>,
                    <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"pagerInfo3"</span>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"pager4"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"pager"</span>,
                    <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"pagerInfo4"</span>,
                    <span style="color:#A31515;">"pageNoProperty"</span>: <span style="color:#A31515;">"currentPage"</span>,
                    <span style="color:#A31515;">"pagesTotalProperty"</span>: <span style="color:#A31515;">"pagesCount"</span>
                }</b>
            ]
        }
    ]
}
</pre></div>
<h2>Data Model</h2>
<div style="color:Black;background-color:White;"><pre><span style="color:Blue;">var</span> pagingData = {
	pagerInfo1: {
		pageNo: 2,
		pagesTotal: 4
	},
	pagerInfo2: {
		pageNo: 5,
		pagesTotal: 7
	},
	pagerInfo3: {
		pageNo: 2,
		pagesTotal: 15
	},
	pagerInfo4: {
		currentPage: 123456,
		pagesCount: 1234567
	}
};
</pre></div>
<h2>Code</h2>
<div style="color:Black;background-color:White;"><pre><span style="color:Blue;">var</span> exampleWindow = redui.createNewWindow(<span style="color:#A31515;">"PagersExample"</span>);
exampleWindow.bind(pagingData);
exampleWindow.show();

exampleWindow.pager1.pageChanged(<span style="color:Blue;">function</span> (target, pageNo) {
	pagingData.pagerInfo1.pageNo = pageNo;
	exampleWindow.bind(pagingData);
});

exampleWindow.pager2.pageChanged(<span style="color:Blue;">function</span> (target, pageNo) {
	pagingData.pagerInfo2.pageNo = pageNo;
	exampleWindow.bind(pagingData);
});

exampleWindow.pager3.pageChanged(<span style="color:Blue;">function</span> (target, pageNo) {
	pagingData.pagerInfo3.pageNo = pageNo;
	exampleWindow.bind(pagingData);
});

exampleWindow.pager4.pageChanged(<span style="color:Blue;">function</span> (target, pageNo) {
	pagingData.pagerInfo4.currentPage = pageNo;
	exampleWindow.bind(pagingData);
});
</pre>